﻿@{
    ViewBag.Title = "TestSelect";
}

<h4>TestSelect</h4>

<div class="row">
    <div class="container col-lg-3">
        <div class="dropdown">
            <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
                Tutorials
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" id="dropdownWmi">
                <li class="dropdown-header">Dropdown header 1</li>
                <li><a href="#">HTML</a></li>
                <li><a href="#">CSS</a></li>
                <li><a href="#">JavaScript</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">Dropdown header 2</li>
                <li><a href="#">About Us</a></li>
            </ul>
        </div>
    </div>

    <div class="col-lg-3" id="selectDiv">
        <select class="form-control" id="selectWmi"></select>
    </div>


</div>


<div class="row">
    <div class="container col-lg-6">
        <table id="example" class="table table-responsive compact hover row-border order-column dataTable" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Name</th>
                    <th>Description</th>
                </tr>
            </thead>

            @*<tfoot>
                <tr>
                    <th>Name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Extn.</th>
                    <th>Start date</th>
                    <th>Salary</th>
                </tr>
            </tfoot>*@
        </table>
    </div>
</div>










<script type="text/javascript">



    //$(document).ready(function () {
    //    $('#example').dataTable({
    //        "ajax": "GetSubCollections",
    //        "columns": [
    //            { "data": "Id" },
    //            { "data": "Name" },
    //            { "data": "Description" }
    //        ]
    //    });
    //});

    $('#example').dataTable({
        'searching': false,
        'sAjaxDataProp': '',
        'ajax': {
            'url': 'GetSubCollections',
            'data': function (data) {
                return data = JSON.stringify(data);
            }
        },
        'aoColumns': [
            { "mData": "Id" },
            { "mData": "Name" },
            { "mData": "Description" }
        ]

    });

    $('#example tbody').on('click', 'tr', function () {
        $(this).toggleClass('selected');
    });






    $('#dropdownWmi li').click(function () {
        $.ajax({
            url: '/Collection/GetProcess',
            data: '',
            dataType: "json",
            start: onAjaxError,
            success: onAjaxSuccess,
            error: onAjaxError,
            cache: false
        });

        function onAjaxSuccess(data) {
            var curElement = document.getElementById('selectDiv');
            var opts = '';
            for (var i = 0; i < data.length; i++) {
                console.log(data[i]);
                opts = opts + '<option>' + data[i].ProcessId + '&nbsp&nbsp&nbsp' + data[i].Caption + '</option>';
            }

            curElement.innerHTML = '<select class="form-control" id="selectWmi">' + opts + '</select>';
        }

        function onAjaxError(data) {
            alert(data.errorCode);
        }
    })
</script>